<template>
  <div id="goods">
    <div class="left-menu">
      <ul>
        <li class="left-menu-itme" v-for="item in goods" :key="item.name">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="right-content">
      <div class="right-content-item" v-for="items in goods" :key="items.name">
        <div class="itme">{{ items.name }}</div>
        <div class="info" v-for="res in goods.foods" :key="res.id">
          <img class="imgs" :src="res.imgUrl" alt="" />
          <div class="conter">
            <h4>{{ res.name }}</h4>
            <p>{{ res.goodsDesc }}</p>
            <p>月售{{ res.sellCount }}份 好评率{{ res.ratings }}....%</p>
            <h3>￥{{ res.price }}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Array,
      default: () => ([])
    }
  }
}
</script>

<style lang="less" scoped>
#goods {
  display: flex;
}
.left-menu {
  width: 120px;
  height: 100%;
  background-color: white;
  overflow-y: auto;
  .left-menu-itme {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    padding: 10px;
    background-color: #f2f6f9;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    &:active {
      background-color: white;
    }
  }
}
.right-content {
  flex: 1;
  .itme {
    width: 100%;
    height: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #ccc;
    border-left: 3px solid #ddd;
    line-height: 30px;
    background-color: #f2f6f9;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .info {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    .imgs {
      width: 70px;
      height: 70px;
    }
    .conter {
      margin-left: 10px;
    }
  }
}
</style>